<template>
    <title>手机密码</title>
    <div class="box">
    <div class="login">
        <el-link type="primary"><span class="wryxll"><strong>wryxll智能交易平台</strong></span></el-link>
			<strong></strong>
        <el-form
        label-width="80px"
        :model="logindata"
        >
        <el-form-item class="www" label="手机号" prop="cellphone" label-width="70px">
					 <el-input  placeholder="请输入账号" v-model="logindata.cellphone" type="tel"></el-input>
				</el-form-item>
                <el-form-item class="www" label="密码" prop="password" label-width="70px">
					<el-input v-model="logindata.password" placeholder="请输入密码" type="password" show-password></el-input>
				</el-form-item>
         <el-form-item lable="登录">
           <el-button @click="subtn" class="subtn" type="primary">登录</el-button>
        </el-form-item>
        <!-- <div class="login111">
             <button>验证码登录</button> <button>二维码登录</button>
        </div> -->
        
        </el-form>
       
    <el-button type="primary" round><router-link to="/login/sylogin">验证码</router-link></el-button>
    <el-button type="primary" round><router-link to="/login/qrlogin">二维码</router-link></el-button>
    <el-button type="primary" round><router-link to="/register">注册</router-link></el-button>

    </div>
    </div>
</template>

<script>
/**
	 * @register 登录功能页面
     * sm  手机密码登录
	 ***/
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
    import {loginIn} from '../../api/login/index.js'
    import {reactive} from 'vue'
    import {ElMessage} from 'element-plus'
    export default{
        name:"login",
        setup() {
            let logindata=reactive({
                cellphone:"",
                password:""
            });
            let subtn=()=>{
                if(!logindata.cellphone || !logindata.password){
                    alert("账号或者密码不为空");
                    return;
                }
                loginIn(logindata).then(res=>{
                    console.log(res)
                    
                })
            };
            return{ logindata,subtn}
        }
    }
</script>
 
<style lang="scss" scoped>
*{
    margin: 0;
    padding:0;
}

// .login{
//     width: 250px;
//     margin: 20px auto;
//     border: 1px solid rgb(179, 215, 255);
//     padding: 20px;
//     border-radius: 10px;
//     background: url("");
// }
.login111{
    margin-top: 20px;
    font-size: 12px;
}
.wryxll{
	font-size: 30px;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  padding-left: 25px;
  color: rgb(0, 0, 0);

}
.subtn{
    margin-bottom: 20px;
}
.el-link__inner{
    margin-bottom: 30px;
}
.el-form-item__label{
    color: rgb(0, 0, 0);
}
.wryxll{
    margin-bottom: 40px;
}
.www{
	margin-bottom: 25px;
}
.el-form-item__label{
    border-radius: 50px;
}
h3{
    text-align: center;
}
.subtn{
    width: 100%;
}
.el-input__wrapper{
	border-radius: 20px;
	background: rgba(255, 250, 240, 0.718);
}
.box{
    position: relative;
    padding: 30px;
    width: 300px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
}
.box::after{
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 5px;
    pointer-events: none;
    background: linear-gradient(to bottom,rgba(97, 218, 255, 0.838) 0%,rgba(94, 155, 254, 0.795) 15%,transparent 50%,transparent 5%,rgb(149, 70, 233) 100%);
}
.box .form h1{
    color:#fff;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 30px;
} 

</style>
